<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="/static/detail/scss/shop.css" />
	<link rel="stylesheet" type="text/css" href="/static/detail/scss/jd.css"/>
	<link rel="stylesheet" href="/static/detail/scss/header.css" />
	<link rel="stylesheet" type="text/css" href="/static/detail/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div id="max">
	<header>
		<!--品牌官方网站-->
		<div class="min">
			<ul class="header_ul_left">
				<li class="glyphicon glyphicon-home"> <a href="/static/detail/shouye.html" class="aa">京东首页</a></li>
				<li class="glyphicon glyphicon-map-marker"> <a href="/static/detail/javascript:;">北京</a>
					<ol id="beijing">
						<li style="background: red;"><a href="/static/detail/javascript:;" style="color: white;">北京</a></li>
					</ol>
				</li>
			</ul>
			<ul class="header_ul_right">
				<li style="border: 0;"><a href="http://auth.gulimall.com/login.html" class="aa"
										  th:if="${session.loginUser==null}"
				>你好，请登录</a>
					<a th:if="${session.loginUser!=null}">你好: [[${session.loginUser.nickname}]]</a>
				</li>
				<li th:if="${session.loginUser==null}"><a href="http://auth.gulimall.com/reg.html" style="color: red;">免费注册</a> |</li>
				<li><a href="/static/detail/javascript:;" class="aa">我的订单</a> |</li>
				<li class="jingdong"><a href="/static/detail/javascript:;">我的京东</a><span class="glyphicon glyphicon-menu-down">|</span>
					<ol class="jingdong_ol">
						<li><a href="/static/detail/javascript:;">待处理订单</a></li>
						<li><a href="/static/detail/javascript:;">消息</a></li>
						<li><a href="/static/detail/javascript:;">返修退换货</a></li>
						<li><a href="/static/detail/javascript:;">我的回答</a></li>
						<li><a href="/static/detail/javascript:;">降价商品</a></li>
						<li><a href="/static/detail/javascript:;">我的关注</a></li>
						<li style="width: 100%;height: 1px;background: lavender;margin-top: 15px;"></li>
						<li style="margin-top: 0;"><a href="/static/detail/javascript:;">我的京豆</a></li>
						<li style="margin-top: 0;"><a href="/static/detail/javascript:;">我的优惠券</a></li>
						<li style="margin-bottom: 10px;"><a href="/static/detail/javascript:;">我的白条</a></li>
					</ol>
				</li>
				<li><a href="/static/detail/javascript:;" class="aa">京东会员</a> |</li>
				<li><a href="/static/detail/javascript:;" class="aa">企业采购</a> |</li>
				<li class="fuwu"><a href="/static/detail/javascript:;">客户服务</a><span class="glyphicon glyphicon-menu-down"></span> |
				</li>
				<li class="daohang"><a href="/static/detail/javascript:;">网站导航</a><span class="glyphicon glyphicon-menu-down"></span> |
				</li>
				<li class="sjjd" style="border: 0;"><a href="/static/detail/javascript:;" class="aa">手机京东</a>
					<div class="er">
						<div class="er_1">
							<div class="er_1_1">
								<h6><a href="/static/detail/#">手机京东</a></h6>
								<p>新人专享大礼包</p>
							</div>
						</div>
						<div class="er_1">
							<div class="er_1_1">
								<h6><a href="/static/detail/#">关注京东微信</a></h6>
								<p>微信扫一扫关注新粉最高180元惊喜礼包</p>
							</div>
						</div>
						<!--我的理财-->
						<div class="er_1" style="border: 0;">
							<img src="/static/detail/img/5874a555Ne8192324.jpg"/>
							<div class="er_1_1">
								<h6><a href="/static/detail/#">京东金融客户端</a></h6>
								<p>新人专享大礼包</p>
								<div><a href="/static/detail/#"><img src="/static/detail/img/11.png"/></a><a href="/static/detail/#"><img src="/static/detail/img/22.png"/></a></div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</header>
	<nav>
		<div class="nav_min">
			<div class="nav_top">
				<div class="nav_top_one"><a href="http://gulimall.com"><img src="/static/detail/img/111.png"/></a></div>
				<div class="nav_top_two"><input type="text"/><button>搜索</button></div>
				<div class="nav_top_three"><a href="/static/detail/../JD_Shop/One_JDshop.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
					<div class="nav_top_three_1">
						<img src="/static/detail/img/44.png"/>购物车还没有商品，赶紧选购吧！
					</div>
				</div>
			</div>
			<div class="nav_down">
				<ul class="nav_down_ul">
				</ul>
			</div>
		</div>
	</nav>
</div>


<div id="wangran">
	<h1>woshiwangran</h1>
</div>


<div class="Shop">
	<div class="box">
		<div class="box-one ">
			<div class="boxx">
				<div class="imgbox">
					<div class="probox">
						<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
						<div class="hoverbox"></div>
					</div>
					<div class="showbox">
						<img class="img1" alt=""  th:src="${item.info.skuDefaultImg}">
					</div>
				</div>
				<div class="box-lh">
					<div class="box-lh-one">
						<ul>
							<li th:each="img :  ${item.images}"
								th:if="${!#strings.isEmpty(img.imgUrl)}"
							><img th:src="${img.imgUrl}" /></li>
						</ul>
					</div>
					<div id="left">
						< </div>
					<div id="right">
						>
					</div>
				</div>
				<div class="boxx-one">
					<ul>
						<li>
									<span>
										<img src="/static/detail/img/b769782fe4ecca40913ad375a71cb92d.png" alt="" />关注
									</span>
							<span>
										<img src="/static/detail/img/9224fcea62bfff479a6712ba3a6b47cc.png" alt="" />
										对比
									</span>
						</li>
						<li>
						</li>
					</ul>
				</div>
			</div>
			<div class="box-two">
				<div class="box-name" th:text="${item.info.skuTitle}">
					华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
				</div>
				<div class="box-hide" th:text="${item.info.skuSubtitle}">预订用户预计11月30日左右陆续发货！麒麟970芯片！AI智能拍照！
					<a href="/static/detail/"><u>华为 HUAWEI Mate 10 Pro 10:08 限时限量抢！</u></a>
				</div>
				<div class="box-yuyue">
					<div class="yuyue-one">
						<img src="/static/detail/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt="" /> 预约抢购
					</div>
					<div class="yuyue-two">
						<ul>
							<li>
								<img src="/static/detail/img/f64963b63d6e5849977ddd6afddc1db5.png" />
								<span>190103</span> 人预约
							</li>
							<li>
								<img src="/static/detail/img/36860afb69afa241beeb33ae86678093.png" /> 预约剩余
								<span id="timer">
									</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="box-summary clear">
					<ul>
						<li>京东价</li>
						<li>
							<span>￥</span>
							<span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
						</li  >
						<li  style="color: red" th:if="${item.seckillInfo!=null}">
									<span th:if="${#dates.createNow().getTime() < item.seckillInfo.startTime}">
									商品将会在[[${#dates.format(new java.util.Date(item.seckillInfo.startTime),"yyyy-MM-dd HH:mm:ss)}]]进行秒杀
									</span>
							<span  th:if="${#dates.createNow().getTime()  >=  item.seckillInfo.startTime      &&    #dates.createNow().getTime()  <=  item.seckillInfo.endTime     }">
										秒杀价格是:   [[${#numbers.formatDecimal(item.seckillInfo.seckillPrice,1,2) }]]
									</span>
						</li>
						<li>
							<a href="/static/detail/">
								预约说明
							</a>
						</li>
					</ul>
				</div>
				<div class="box-stock">
					<ul class="box-ul">
						<li>配送至</li>
						<li class="box-stock-li">
							<div class="box-stock-one">
								北京朝阳区管庄
								<img src="/static/detail/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
							</div>
							<div class="box-stock-two">
								<dl>
									<dt>
										<a>选择新地址</a>
										<img src="/static/detail/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="box-stock-two-img"/>
									</dt>
									<dd>
									</dd>
								</dl>
							</div>
						</li>
						<li>
							<span th:text="${item.hasStock?'有货':'无货'}">无货， 此商品暂时售完</span>
						</li>
					</ul>
				</div>
				<div class="box-attr-3">
					<div class="box-attr clear" th:each=" attr :   ${item.saleAttr}"  >
						<dl>
							<dt>选择[[${attr.attrName}]]</dt>
							<dd th:each="vals  :  ${attr.attrValues}">
								<a  class="sku_attr_value "
									th:attr=" skus=${vals.skuIds} , class=${#lists.contains(#strings.listSplit(vals.skuIds,','),item.info.skuId.toString())?'sku_attr_value checked':'sku_attr_value'}"
								>
									<!--											<img src="/static/detail/img/59ddfcb1Nc3edb8f1.jpg" />-->
									[[${vals.attrValue}]]
								</a>
							</dd>
						</dl>
					</div>
				</div>



				<div class="box-btns clear">




					<div class="box-btns-one">



						<input type="text" name="" id="numberInput" value="1" />



						<div class="box-btns-one1">

							<div>
								<button id="jia">
									+
								</button>
							</div>


							<div>
								<button id="jian">
									-
								</button>
							</div>


						</div>
					</div>





					<div class="box-btns-two" th:if="${   item.seckillInfo!=null   &&  ( #dates.createNow().getTime()  >=  item.seckillInfo.startTime      &&    #dates.createNow().getTime()  <=  item.seckillInfo.endTime )    }">
						<!--								<a href="/static/detail/../商品分类\index.html">-->
						<a href="#"  id="seckillLink" th:attr="skuId=${item.info.skuId},sessionId=${item.seckillInfo.promotionSessionId},code=${item.seckillInfo.randomCode}">
							立即抢购
						</a>
					</div>


					<div class="box-btns-two" th:if="${     item.seckillInfo==null   ||                    (#dates.createNow().getTime()  <  item.seckillInfo.startTime      ||    #dates.createNow().getTime()  >  item.seckillInfo.endTime   )  }">
						<!--								<a href="/static/detail/../商品分类\index.html">-->
						<a href="#"  id="addToCartLink" th:attr="skuId=${item.info.skuId}">
							加入购物车
						</a>
						<h1>woshiwantgran</h1>
					</div>






					<div class="box-btns-three">
						<img src="/static/detail/img/e4ed3606843f664591ff1f68f7fda12d.png" alt="" /> 分享
					</div>





				</div>
				<div class="box-footer-zo">
					<div class="box-footer clear">
						<dl>
							<dt>本地活动</dt>
							<dd>
								<a href="/static/detail/">
									·1元500MB激活到账30元 >>
								</a>
							</dd>
						</dl>
					</div>
					<div class="box-footer">
						<dl>
							<dt>温馨提示</dt>
							<dd>·本商品不能使用 东券 京券</dd>
							<dd>·请完成预约后及时抢购！</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--欲约抢购流程-->
	<div class="ShopXiangqing">
		<div class="allLeft">
			<!--火热预约-->
			<div class="huoreyuyue">
				<h3>火热预约</h3>
			</div>
			<!--看了又看-->
		</div>
		<!--商品介绍-->
	</div>
</div>
<div class="Fixedbian">
	<ul>
		<li class="li1"><a class="aaa" href="/static/detail/##">顶部</a></li>
	</ul>
</div>
<div class="gouwuchexiaguo">
	<img src="/static/detail/img/44.png" />
	<span>购物车还没有商品，赶紧选购吧！</span>
</div>
</body>
<script src="/static/detail/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/detail/js/js.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#addToCartLink").click(function (){
		var  num =$("#numberInput").val()
		var   skuId =  $(this).attr("skuId");
		location.href="http://cart.gulimall.com/addToCart?skuId="+skuId+"&num="+num;
		return false;
	})
	$(".sku_attr_value").click(function () {
		var skus = new Array()
		$(this).addClass("clicked");
		var  curr=$(this).attr("skus").split(",")
		skus.push(curr)
		$(this).parent().parent().find(".sku_attr_value").removeClass("checked")
		$("a[class='sku_attr_value checked']").each(function () {
			skus.push($(this).attr("skus").split(","))
		})
		var   filterEle  =skus[0]
		for( var i=1;i<skus.length;i++){
			filterEle =$(filterEle).filter(skus[i])
		}
		location.href="http://item.gulimall.com/"+filterEle[0]+".html"
	})
	$(function () {
		$(".sku_attr_value").parent().css({"border":"solid 1px #CCC"})
		$("a[class='sku_attr_value  checked']").parent().css({"border":"solid 1px  red"})
	})
	$("#seckillLink").click( function () {
		let  isLogin  =[[${session.loginUser!=null}]]
		if(isLogin){
			var  killId=  $(this).attr("sessionId")+"_"+$(this).attr("skuid")
			var key  =   $(this).attr("code")
			var num =   $("#numberInput").val()
			location.href="http://seckill.gulimall.com/kill?killId="+killId+"&key="+key+"&num="+num
		}else{
			alert("秒杀请先登录")
		}
		return false;
	})
</script>
</html>
